{% import '../macros/icon.njk' as icon %}
<div class="row header border-bottom pdl10 pdr5">
    <div class="grid">
        <div class="column is-three-quarters">
            <h1 class="content-title">{{ selected.title }}</h1>
            <p class="content-subtitle">
                {% for tag in selected.tags.split('#') %}
                    {% if tag %}
                        <a href="/tags/{{ tag }}">#{{ tag.trim() }}</a>
                    {% endif %}
                {% endfor %}
            </p>
        </div>
        <div class="column is-one-quarters">
            <button id="copyHTML" class="button is-light">
                <span class="icon">{{ icon.svg('clipboard') }}</span>
            </button>
            <button id="edit" data-id="{{ selected.id }}" class="button is-warning">
                <span class="icon">{{ icon.svg('pencil-square') }}</span>
            </button>
            <button class="button is-primary">
                <span>{{ icon.svg('translate') }}</span>
            </button>
            <button class="button is-danger">
                <span>{{ icon.svg('trash2') }}</span>
            </button>
        </div>
    </div>
</div>
<div class="row content autoscroll-y pdl10 pdr5">
    {{ selected.html|safe }}
</div>
<div class="row footer pdl10 pdr5">
    <p>footer (fixed height)</p>
</div>